<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Multi Binding Test</title>
        <script type="text/javascript">
            var DYNAMIC_CONTAINER_COUNT = 6;
            var PRIMES = [1453, 4273, 6277, 9923, 26099, 41231];
            function replaceContainer(id, src)
            {
                console.log("Replacing Container " + id);
                var container = document.getElementById("dynamicContainer" + id);
                var newFrame = document.createElement("iframe");
                newFrame.style.width = newFrame.style.height = "100%";
                newFrame.src = src || "custom://cefsharp/BindingTest.html";
                Array.prototype.forEach.call(container.children, c => container.removeChild(c));
                container.appendChild(newFrame);
            }
            window.addEventListener("load", function()
            {
                for (var i = 0; i < DYNAMIC_CONTAINER_COUNT; i++)
                {
                    var interval = PRIMES[i%PRIMES.length];
                    window.setInterval(replaceContainer.bind(undefined, i + 1), interval);
                }
            });
            
        </script>
    </head>
    <body>
        <table style="width:100%; height:100%">
            <tr height="34%">
                <td width="50%" id="dynamicContainer1">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
                <td width="50%" id="dynamicContainer2">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
            </tr>
            <tr height="33%">
                <td width="50%" id="dynamicContainer3">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
                <td width="50%" id="dynamicContainer4">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
            </tr>
            <tr height="33%">
                <td width="50%" id="dynamicContainer5">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
                <td width="50%" id="dynamicContainer6">
                    <iframe src="custom://cefsharp/BindingTest.html" style="width:100%; height:100%"></iframe>
                </td>
            </tr>
        </table>
    </body>
</html>
